import React from "react";
// 导入样式
// import "./index.css";
import styles from "./index.module.css";
// 导入NavHeader顶部导航栏
import NavHeader from "../../components/NavHeader";
// 导入axios
import {API} from "../../utils/api";
// 导入antd-mobild的Link标签
import { Link } from "react-router-dom";
import { Toast } from "antd-mobile";
// 导入URL地址
import {BASE_URL} from '../../utils/url'
import HouseItem from '../../components/HouseItem'
// 更改全局对象
const BMap = window.BMap;
// 覆盖物样式
const labelStyle = {
  cursor: "pointer",
  border: "0px solid rgba(255,0,0)",
  padding: "0px",
  whiteSpace: "nowrap",
  fontSize: "12px",
  color: "rgba(255,255,255)",
  textAlign: "center"
};
export default class Map extends React.Component {
  state = {
    houseMin: [],
    isShowList: false
  };
  componentDidMount() {
    this.initMap();
  }
  initMap = () => {
    // 获取本地存储中当前定位城市
    const { label, value } = JSON.parse(localStorage.getItem("city"));
    // 创建一个地图实例
    const map = new BMap.Map("container");
    const myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async point => {
        if (point) {
          // 初始化地图
          map.centerAndZoom(point, 11);
          this.map = map;
          // 添加常用控件
          map.addControl(new BMap.NavigationControl());
          map.addControl(new BMap.ScaleControl());
          map.addControl(new BMap.MapTypeControl());
          // 调用renderOverlays方法
          this.renderOverlays(value);
        }
      },
      label
    );
    // 为地图绑定移动事件
    map.addEventListener("movestart", () => {
      if (this.state.isShowList) {
        this.setState(() => {
          return {
            isShowList: false
          };
        });
      }
    });
  };
  // 渲染覆盖物入口
  // 1.获取区域id，请求数据
  // 2.获取房源类型地图缩放级别
  async renderOverlays(id) {
    try {
      // 开启loading效果
      Toast.loading("Loading...", 0, null, false);
      const { data: res } = await API.get(
         `/area/map?id=${id}`
      );
      // 关闭loading效果
      Toast.hide();
      // 调用getTypeAndZoom 方法
      const { nextZoom, type } = this.getTypeAndZoom();
      res.body.forEach(item => {
        // 创建覆盖物
        this.createOverlays(item, nextZoom, type);
      });
    } catch (e) {
      // 关闭loading效果
      Toast.hide();
    }
  }
  // 计算覆盖区类型和下一个缩放级别
  getTypeAndZoom() {
    // 调用百度地图的getzoom方法，获取当前缩放级别
    const zoom = this.map.getZoom();
    // 下个缩放级别
    let nextZoom, type;
    if (zoom >= 10 && zoom <= 12) {
      // 区
      nextZoom = 13;
      type = "circle";
    } else if (zoom >= 12 && zoom <= 14) {
      // 镇
      nextZoom = 15;
      type = "circle";
    } else if (zoom >= 14 && zoom <= 16) {
      // 小区
      type = "rect";
    }
    return { nextZoom, type };
  }
  // 创建覆盖物
  createOverlays(data, zoom, type) {
    const {
      coord: { latitude, longitude },
      label: areaName,
      count,
      value
    } = data;
    // 创建坐标对象
    const areaPoint = new BMap.Point(longitude, latitude);
    if (type === "circle") {
      // 区或镇
      this.createCircle(areaPoint, areaName, count, value, zoom);
    } else {
      // 小区
      this.createRect(areaPoint, areaName, count, value);
    }
  }
  // 创建区的覆盖物
  createCircle(point, name, count, id, zoom) {
    // 添加文字覆盖物;
    const opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(-35, -35) //设置文本偏移量
    };
    const label2 = new BMap.Label("", opts); // 创建文本标注对象
    // 为label2对象添加一个唯一的表识
    label2.id = id;
    // 设置房源覆盖物内容
    label2.setContent(`
            <div class="${styles.bubble}">
              <p class="${styles.name}">${name}</p>
              <p>${count}套</p>
            </div>
            `);
    label2.setStyle(labelStyle);
    label2.addEventListener("click", () => {
      // 调用renderOverlays方法，获取该区域下的房源数
      this.renderOverlays(id);
      // 放大地图
      this.map.centerAndZoom(point, zoom);
      // 解决清除覆盖物时，百度地图API报错的问题
      setTimeout(() => {
        // 清除覆盖物
        this.map.clearOverlays();
      }, 1);
    });
    this.map.addOverlay(label2);
  }
  // 创建小区的覆盖物
  createRect(point, name, count, id) {
    // 添加文字覆盖物;
    const opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(-50, -28) //设置文本偏移量
    };
    const label2 = new BMap.Label("", opts); // 创建文本标注对象
    // 为label2对象添加一个唯一的表识
    label2.id = id;
    // 设置房源覆盖物内容
    label2.setContent(`
            <div class="${styles.rect}">
              <span class="${styles.houseName}">${name}</span>
              <span class="${styles.houseNum}">${count}套</span>
              <i class="${styles.arrow}"></i>
            </div>
            `);
    label2.setStyle(labelStyle);
    label2.addEventListener("click", e => {
      this.getHouseList(id);
      // 放大地图
      this.map.centerAndZoom(point, 16);
      // 获取当前被点击项
      const target = e.changedTouches[0];
      this.map.panBy(
        window.innerWidth / 2 - target.clientX,
        (window.innerHeight - 330) / 2 - target.clientY
      );
    });
    this.map.addOverlay(label2);
  }
  // 获取小区房源数据
  async getHouseList(id) {
    try {
      // 开启loading效果
      Toast.loading("Loading...", 0, null, false);
      const { data: res } = await API.get(
        `/houses?cityId=${id}`
      );
      // 关闭loading效果
      Toast.hide();
      // 存放在状态中
      this.setState(() => {
        return {
          houseMin: res.body.list,
          isShowList: true
        };
      });
    } catch (e) {
      // 关闭loading效果
      Toast.hide();
    }
  }
  // 封装渲染房屋列表的方法
  renderHouseList() {
    return this.state.houseMin.map(item => (
      <HouseItem
        key={item.houseCode}
        src={BASE_URL + item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price}
      />
    ));
  }
  // renderHouseList() {
  //   return this.state.houseMin.map(item => (
  //     <div className={styles.house} key={item.houseCode}>
  //       <div className={styles.imgWrap}>
  //         <img
  //           className={styles.img}
  //           src={BASE_URL + item.houseImg}
  //           alt=""
  //         ></img>
  //       </div>
  //       <div className={styles.content}>
  //         <h3 className={styles.title}>{item.title}</h3>
  //         <div className={styles.desc}>{item.desc}</div>
  //         <div>
  //           {item.tags.map((tag, index) => {
  //             const tagClass = "tag" + (index + 1);
  //             return (
  //               <span
  //                 className={[styles.tag, styles[tagClass]].join(" ")}
  //                 key={tag}
  //               >
  //                 {tag}
  //               </span>
  //             );
  //           })}
  //         </div>
  //         <div className={styles.price}>
  //           <span className={styles.priceNum}>{item.price}元</span>
  //         </div>
  //       </div>
  //     </div>
  //   ));
  // }
  render() {
    return (
      <div className={styles.map}>
        {/* 顶部导航栏 */}
        <NavHeader>地图找房</NavHeader>
        {/* 地图元素容器 */}
        <div id="container" className={styles.container}></div>
        {/* 房源列表 */}
        <div
          className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ""
          ].join(" ")}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <Link className={styles.TitleMore} to="/home/list">
              更多房源
            </Link>
          </div>
          <div className={styles.houseItems}>
            {/* 房屋结构 */}
            {this.renderHouseList()}
          </div>
        </div>
      </div>
    );
  }
}
